/*----------------switch.less(start)--------------*/
/*关闭状态*/
.switch {
	position: relative;
	display: inline-block;
	height: @px30;
	width: @px60;
	background-color:transparent;
	border-radius: @px30;
	-webkit-transition-duration: .2s;
	-webkit-transition-property: background-color, border;
	border-width:@px1;
	border-style:solid;
	
	border-color:@dpborder;

	/*关闭状态文字off*/
	&:after{
		position: absolute;
		right: @px11;
		top:50%;
		-webkit-transform:translateY(-50%);
		content: attr(data-off);
		
		color: @placeholder;
	}
	/*关闭状态圆点*/
	.switch-handle{
		pointer-events:none;
		position: absolute;
		left:0;
		top:50%;
		-webkit-transform:translate(@px4,-50%);
		width: @px20;
		height: @px20;
		border-radius: @px100;
		-webkit-transition-duration: .2s;
		-webkit-transition-property:-webkit-transform, border, width;
		
		background-color:@dpborder;
	}
	/*打开状态*/
	&.active {
		background-color:transparent;
		/*打开状态文字on*/
		&:after{
			right: auto;
			left: @px11;
			content: attr(data-on);

			color: @placeholder;
		}
		/*打开状态小圆点*/
		.switch-handle{
			left:0;
			top:50%;
			-webkit-transform: translate(@px34,-50%);

			background-color: @success-bg;
		}
	}
	/*开关控件toggle-反转*/
	&.reverse{
		border:none;
		background-color:white;
		box-shadow: inset 0 0 0 @px2 @dpborder;
		
		.switch-handle{
			width: @px26;
			height: @px26;
			-webkit-transform: translate(@px2,-50%);

			background-color:white;
			-webkit-box-shadow: @px1 @px1 @px2 @px1 rgba(0, 0, 0, 0.2);
		}
		&.active{
			background-color:@success-bg;
			-webkit-box-shadow: none;
			&:after{
				color:white;
			}
			.switch-handle{
				-webkit-transform: translate(@px32,-50%);

				background-color:white;
			}
		}
		&:after{
			color:@placeholder;
		}
	}
}
/*开关控件toggle-无文字*/
.notext.switch{
	width: @px50;
	&.active{
		.switch-handle{
			 -webkit-transform: translate(@px24,-50%);
		}
	}
	&:after{
		content:none;
	}
	&.reverse.active .switch-handle{
		-webkit-transform: translate(@px22,-50%);
	}
}
/*----------------switch.less(end)--------------*/